<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伸缩盒主轴</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;
            display: flex;

            /*伸缩盒属性*/

            /*主轴起点左边，终点右边，侧轴起点上边，终点下边,主轴侧轴是垂直的*/
            /*元素沿着主轴排列,主轴侧轴方向最好不改（主轴改了侧轴就默认改了，不能单独改侧轴）*/

                /*默认主轴方向，从左到右  */
            /* flex-direction: row; */
            /* 改成从右到左 */
            /* flex-direction: row-reverse; */

            /* 改成从上到下,加REVERSE就从下到上了 */
            flex-direction: column;

        }

        .inner {
            width: 200px;
            height: 198px;
            border: 1px solid black;
            background-color: skyblue;
        }

    </style>
</head>
<body>
<div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
</div>


</body>
</html>